<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue text-white" :isBack="false">
			<block slot="content">用户授权</block>
			<block slot="right">
				<view class="action">
					<view class="cu-load load-cuIcon" :class="isLoad?'loading':'over'"></view>
				</view>
			</block>
		</cu-custom>
		<view class="text-center margin-top-sm">
			<image class="logo" src="/static/logo.png" mode=""></image>
			<view class="slogan">
				<text>登录后将获得以下权限</text>
				<text>▪ 收藏文章、评论等功能</text>
			</view>
			<button class="login-btn" @tap="login">微信用户一键登录</button>
		</view>
	</view>
</template>

<script>
	import autoLogin from '@/common/autoLogin.js';
	export default {
		mixins: [autoLogin],
		data() {
			return {
				isLoad: false
			}
		},
		methods: {
			login() {
				if (this.isLoad) {
					return false
				}
				this.isLoad = true
				this.uniLogin().then(res => {
					this.isLoad = false
					if (res) {
						// 获取路由和跳转地址
						const routerKey = this.$cache.key.router
						const router = this.$cache.get(routerKey)
						const urlKey = this.$cache.key.url
						const url = this.$cache.get(urlKey)
						if (router && url) {
							// 删除缓存
							this.$cache.remove(routerKey)
							this.$cache.remove(urlKey)
							if (url === '/pages/index/index' || url === '/pages/archive/archive' || url === '/pages/search/search' || url === '/pages/my/my') {
							  wx.switchTab({
								url: url
							  })
							} else {
							  wx.redirectTo({
								url: url
							  })
							}
						} else {
							wx.switchTab({
								url: '/pages/index/index',
							})
						}
					} else {
						this.$tools.showToast({
							msg: '登录失败！'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.logo{
		width: 215rpx;
		height: 215rpx;
		margin-bottom: 30rpx;
		border-radius: 16rpx;
	}
	.login-btn{
		width: 650rpx;
		margin: 200rpx auto  0 auto;
		line-height: 88rpx;
		height: 88rpx;
		border-radius: 44rpx;
		color: #fff;
		background: linear-gradient(90deg,#287FFA,#28C8FA);
		box-shadow: 0px 4rpx 20rpx rgba(40, 127, 250, .5);
	}
	.slogan{
		width: 690rpx;
		margin: 0 auto;
		font-size: 24rpx;
		line-height: 40rpx;
		text-align: center;
		text{
			display: block;
		}
	}
</style>
